<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router"
import Footer from "../components/Footer.vue";
import {getUserByIdByPass} from "../network/api.ts";

let userId =ref()
let password = ref()
const router = useRouter()
// http://localhost:8080/

function login(){
  console.log("进入Login页面，此时userId="+userId.value+"，此时password="+password.value)
  if(userId.value==''||password.value==''){
    alert('手机号码或密码不能为空！');
    console.log('手机号码或者密码不能为空！'); //如果你的网页自带密码, 那么会影响这里的逻辑,得删去密码的内容之后 再进行才生效
    return;
  }
  let data = reactive({
    id:userId.value,
    pw:password.value
  })
  getUserByIdByPass(data).then(res=>{
      let user = res.data;
      if(res.data.length==0){//即 接口找不到该用户
        alert('用户名或密码不正确！');
        console.log("获取到的user对象："+user)
        console.log('用户名或密码不正确！')
      }else{
        alert('登陆成功');
        user.userImg = '';
        sessionStorage.setItem("userId", user.userId)//存储user到浏览器中, 但是关闭浏览器后就会丢弃   (key, value)  尽量不用他存一个对象, bec实现不了.
        sessionStorage.setItem("user",user)
        sessionStorage.setItem("userName",user.userName)
        sessionStorage.setItem("userSex",user.userSex)

        // sessionStorage.setItem("userId", user.userId)
        console.log("获取到的user对象："+user)
        router.back();

      }
  }).catch(error=>{
      console.error(error);
  })

  // http://localhost:8080/UserController/getUserByIdByPass
}
function register(){
  router.push({
    path:"/register"
  })

}

onMounted(()=>{
  userId.value = ""
  password.value = ''
  //console.log("当次使用的用户userId="+sessionStorage.getItem("userId"))
})
</script>

<template>
  <div class="wrapper w-full h-full">

    <!-- header部分 -->
    <header class="w-full h-12vw bg-[#0097ff] flex justify-around items-center text-white text-[4.8vw] fixed left-0 top-0 z-1000">
      <p>用户登陆</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box w-full mt-12vw ">
      <li class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex items-center">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          手机号码：
        </div>
        <div class="content flex">
          <input class="border-none outline-none w-full h-4vw text-3vw " type="text" v-model="userId" placeholder="手机号码">
        </div>
      </li>
      <li class="box-border pt-4vw pl-3vw pb-0 pr-3vw flex items-center">
        <div class="title w-18vw flex text-3vw font-700 text-#666">
          密码：
        </div>
        <div class="content flex">
          <input class="border-none outline-none w-full h-4vw text-3vw " type="password" v-model="password" placeholder="密码">
        </div>
      </li>
    </ul>

    <div class="button-login w-full box-border pt-4vw pl-3vw pb-0 pr-3vw">
      <button class="hover:bg-green-6 w-full h-10vw text-3.8vw font-700 text-white bg-#38ca73 rounded-4px border-none outline-none "
              @click="login">登陆</button>
    </div>
    <div class="button-register w-full box-border pt-4vw pl-3vw pb-0 pr-3vw">
      <button class="hover:bg-green-1 w-full h-10vw text-3.8vw font-700 text-#666 bg-#eee border-solid boorder-1px border-#ddd rounded-4px"
              @click="register">去注册</button>
    </div>

<!--    &lt;!&ndash; 底部菜单部分 &ndash;&gt;-->
<!--    <Footer></Footer>-->
  </div>

</template>

<style scoped>

</style>